<template>
    <div style="padding: 15px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="推送红包记录" name="first">
                <el-form :inline="true" :model="queryParams" class="demo-form-inline">
                    <el-form-item label="手机号">
                        <el-input v-model="queryParams.phone" clearable placeholder="手机号"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="getData">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="phone" label="手机号" width="180">
                    </el-table-column>
                    <el-table-column prop="couponName" label="红包名称">
                    </el-table-column>
                    <el-table-column prop="num" label="推送数量">
                    </el-table-column>
                </el-table>
                <div class="block" style="text-align: right">
                    <el-pagination @size-change="getData" @current-change="getData" :current-page.sync="queryParams.page"
                        :page-sizes="[10, 20, 30, 40]" :page-size.sync="queryParams.pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="推送次卡记录" name="second"> 
                <el-form :inline="true" :model="queryParams" class="demo-form-inline">
                    <el-form-item label="手机号">
                        <el-input v-model="queryParams.phone" clearable placeholder="手机号"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="getData">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" style="width: 100%">

                    <el-table-column prop="phone" label="手机号" width="180">
                    </el-table-column>
                    <el-table-column prop="couponName" label="次卡名称" width="180">
                    </el-table-column>
                    <el-table-column prop="num" label="推送数量">
                    </el-table-column>
                </el-table>
                <div class="block" style="text-align: right">
                    <el-pagination @size-change="getData" @current-change="getData" :current-page.sync="queryParams.page"
                        :page-sizes="[10, 20, 30, 40]" :page-size.sync="queryParams.pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                </div>
            </el-tab-pane>


        </el-tabs>
    </div>
</template>
<script>
import { pushPageList } from '@/config/api'
export default {
    data() {
        return {
            activeName: 'first',
            tableData: [],
            queryParams: {
                page: 1,
                pageSize: 10,
                phone: "",
                pushType: 1
            },
            total: 0,
            index :0

        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        handleClick(tab) {
            this.index = tab.index
          
            this.getData()
        },
        getData() {
            if (this.index == 0) {
                this.queryParams.pushType = 1
            } else {
                this.queryParams.pushType = 2
            }
            pushPageList(this.queryParams).then(res => {
                this.tableData = res.data.result.list
                this.total = res.data.result.total
            })
        }
    }
};
</script>